<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css">


<style>
	th {
		text-align: center;
	}
    ul.nav-tabs{
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child{
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    ul.nav-tabs.affix{
        top: 30px; /* Set the top position of pinned element */
    }
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container" id='maxDiv'>
	<div class="jumbotron2">
		<h1>API</h1>
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125" v-for="(interface,index) in data">
                <li class="active">
                	<a v-bind:href="'#section-' + interface.id">
               	 		{{index+1}}.{{interface.name}}
               	 	</a>
               	 </li>
            </ul>
        </div>
        <div class="col-xs-9">
        	<div  v-for="(interface,index) 	 in data">
	            <h2 v-bind:id="'section-'+ interface.id">{{index+1}}.{{interface.name}}</h2>
	            <p>
            		<span title="点击复制" class="glyphicon glyphicon-paperclip" @click='copyUrl($event)'></span>
            		<span class="label label-primary">{{interface.url}}</span>
            		<span class="label label-success">{{interface.method}}</span>
            		<table class="table table-bordered">
					  <thead>
					    <tr>
					      <th>名称</th>
					      <th>说明</th>
					      <th>允许为空</th>
					      <th>默认值</th>
					    </tr>
					  </thead>
					  <tbody>
					    <tr v-for="param in interface.params">
					      <td>{{param.name}}</td>
					      <td>{{param.remark}}</td>
					      <td>{{param.isNull}}</td>
					      <td>{{param._default}}</td>
					    </tr>
					    
					    <tr><td colspan="4">返回值说明</td></tr>
					    
					    <tr v-for="result in interface.results">
					      <td>{{result.code}}</td>
					      <td colspan="3">{{result.remark}}</td>
					    </tr>
					  </tbody>
					</table>
	            </p>
	            <hr>
            </div>
        </div>
    </div>
</div>


<script>
	var data = [];
	
	var vue = new Vue({
		el : '#maxDiv',
		data : {
			data : data
		},
		methods : {
			copyUrl : function(e){
				var dom =jQuery(e.target).next();
                dom.select();//选择对象  
                document.execCommand("Copy");
			}
		}
	});
	$(function(){
		$.get('/ssi/interface/getInterfaces',function(result){
			result = JSON.parse(result);
			if(result.code == '000'){
				vue.data = result.data;
			}
		});
	});
</script>
</body>
</html>